<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
    <style type="text/css">
    	.mui-slider-item{
    		width: 100px;
    		height: 100px;
    	}
    </style>
      <body>
      <header class="mui-bar mui-bar-nav">
          <h1 class="mui-title">Ar龙</h1>
      </header>
      
      
      <nav class="mui-bar mui-bar-tab">
          <a class="mui-tab-item mui-active">
              <span class="mui-icon mui-icon-home"></span>
              <span class="mui-tab-label">首页</span>
          </a>
          <a class="mui-tab-item">
              <span class="mui-icon mui-icon-phone"></span>
              <span class="mui-tab-label">电话</span>
          </a>
          <a class="mui-tab-item">
              <span class="mui-icon mui-icon-email"></span>
              <span class="mui-tab-label">邮件</span>
          </a>
          <a class="mui-tab-item">
              <span class="mui-icon mui-icon-gear"></span>
              <span class="mui-tab-label">设置</span>
          </a>
      </nav>
      
      
      <div class="mui-content">
      	    <div id="slider" class="mui-slider" >
      	      <div class="mui-slider-group mui-slider-loop">
      	        <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
      	        <div class="mui-slider-item mui-slider-item-duplicate">
      	          <a href="#">
      	            <img src="20160512115054.jpg">
      	          </a>
      	        </div>
      	        <!-- 第一张 -->
      	        <div class="mui-slider-item">
      	          <a href="#">
      	            <img src="20160512115054.jpg">
      	          </a>
      	        </div>
      	        <!-- 第二张 -->
      	        <div class="mui-slider-item">
      	          <a href="#">
      	            <img src="20160512115054.jpg">
      	          </a>
      	        </div>
      	        <!-- 第三张 -->
      	        <div class="mui-slider-item">
      	          <a href="#">
      	            <img src="20160512115054.jpg">
      	          </a>
      	        </div>
      	        <!-- 第四张 -->
      	        <div class="mui-slider-item">
      	          <a href="#">
      	            <img src="20160512115054.jpg">
      	          </a>
      	        </div>
      	        <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
      	        <div class="mui-slider-item mui-slider-item-duplicate">
      	          <a href="#">
      	            <img src="20160512115054.jpg">
      	          </a>
      	        </div>
      	      </div>
      	      <div class="mui-slider-indicator">
      	        <div class="mui-indicator mui-active"></div>
      	        <div class="mui-indicator"></div>
      	        <div class="mui-indicator"></div>
      	        <div class="mui-indicator"></div>
      	      </div>
      	    </div>
      	  
          <ul class="mui-table-view">
          <li class="mui-table-view-cell mui-media">
              <a href="javascript:;">
                  <img class="mui-media-object mui-pull-left" src="20160512115054.jpg">
                  <div class="mui-media-body">
                      幸福
                      <p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
                  </div>
              </a>
          </li>
          <li class="mui-table-view-cell mui-media">
              <a href="javascript:;">
                  <img class="mui-media-object mui-pull-left" src="20160512115054.jpg">
                  <div class="mui-media-body">
                      木屋
                      <p class="mui-ellipsis">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
                  </div>
              </a>
          </li>
          <li class="mui-table-view-cell mui-media">
              <a href="javascript:;">
                  <img class="mui-media-object mui-pull-left" src="20160512115054.jpg">
                  <div class="mui-media-body">
                      CBD
                      <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
                  </div>
              </a>
          </li>
      </ul>
       
      
      
      </div>
</body>
</html>